

<template>
<p>npm create vue@latest</p>
<!-- <Hello /> -->
 <first />
 <second />
 <third />
 <fourth />
 <fifth />
 <!-- //列表渲染的例子 -->
 <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
  <!-- 事件处理的例子 -->
<sixth />
<!-- 表单绑定输入 -->
<seventh />
<!-- 侦听器 -->
 <eighth />
<!-- 模版引用 -->
 <ninth />
 <!-- 组件属性 -->
<tenth />
  


</template>
<script setup>
import { ref } from 'vue'
// import Hello from './pages/hello.vue'
import first from './components/响应式基础.vue'
import second from './components/计算属性.vue'
import third from './components/类与样式绑定.vue'
import fourth from './components/条件渲染.vue'
import fifth from './components/列表渲染.vue'
import sixth from './components/事件处理.vue'
import TodoItem from './components/TodoItem.vue'
import seventh from './components/表单输入绑定.vue'
import eighth from './components/侦听器.vue'
import ninth from './components/模板引用.vue'
import tenth from './components/组件基础.vue'
//列表渲染的JS
const newTodoText=ref('')
const todos= ref([
     {
    id: 1,
    title: 'Do the dishes'
  },
  {
    id: 2,
    title: 'Take out the trash'
  },
  {
    id: 3,
    title: 'Mow the lawn'
  }
])
let nextTodoId=4
function addNewTodo(){
    todos.value.push({
    id: nextTodoId++,
    title: newTodoText.value
  })
  newTodoText.value = ''
}
const props=defineProps(['title'])


</script>

<style></style>
